<template>
    <div class='bomLogDetail' v-loading='loading'>
        <div class="title">导入日志详情</div>
        <div class="formArea">
            <el-form ref="createForm" label-width="120px" size="mini">
                <el-form-item label="导入时间">
                    {{ detailData.createTime }}
                </el-form-item>
                <el-form-item label="导入用户">
                    {{ detailData.account }}
                </el-form-item>
                <el-form-item label="导入结果">
                    {{ detailData.result }}
                </el-form-item>
                <el-form-item label="导入详情">
                    {{ detailData.detail }}
                </el-form-item>
            </el-form>
        </div>

        <el-table :data="tableList" border style="width: 100%" :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            v-loading="loading" element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading" :cell-style="{color:'#1f273d',fontSize:'12px',fontWeight:400}">
            <el-table-column prop="失败原因" label="失败原因" width=''></el-table-column>
            <el-table-column prop="工艺路线编号" label="工艺路线编号" width='160'></el-table-column>
            <el-table-column prop="工艺路线名称" label="工艺路线名称" width='160'></el-table-column>
            <el-table-column prop="工序列表" label="工序列表" width='160'></el-table-column>
            
            <div slot="empty">
                <el-empty></el-empty>
            </div>
        </el-table>

        <el-pagination
            v-if="tableList.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10,20,50,100]"
            :page-size="limit"
            layout="total, prev, pager, next, sizes, jumper"
            :total="total"
            background>
        </el-pagination>
    </div>
</template>

<script>
import {
    importLog
} from '@/api/baseController'
export default {
    data() {
        return {
            detailData: {},
            tableList: [],
            detailVal: {},
            limit: 10,
            page: 1,
            total: 0,
            currentPage: 1,
            loading: false
        }
    },
    mounted() {
        this.detailVal = this.$route.query
        this.loading = true
        this.getImportLog()
    },
    methods: {
        getImportLog() {
            let data = {
                limit: this.limit,
                page: this.page,
                type: 'processRoute',
                startTime: this.detailVal.selTime[0],
                endTime: this.detailVal.selTime[1]
            }
            this.loading = true
            importLog(data).then(res => {
                this.loading = false
                if(res.code == 200 && res.data) {
                    let arr = res.data.list.find(res => {  return res.createTime == this.detailVal.time })
                    let result = ''
                    if((arr.count != 0 && arr.data.createFail == 0) || arr.count == 0) {
                        result = '导入成功'
                    } else if(arr.count != 0 && arr.data.createSuccess == 0) {
                        result = '导入失败'
                    } else if(arr.count != 0 && arr.data.createSuccess != 0 && arr.data.createFail != 0) {
                        result = '导入部分成功'
                    }
                    let detail = '导入成功' + arr.data.createSuccess + '条,导入失败' + arr.data.createFail + '条'
                    this.detailData = {
                        account: arr.account,
                        createTime: arr.createTime,
                        result: result,
                        detail: detail
                    }
                    this.total = arr.reason.length
                    this.tableList = arr.reason
                }
            })
        },
        // 分页
        handleSizeChange(val) {
            this.limit = val
            this.getImportLog(this.searchForm)
        },
        handleCurrentChange(val) {
            this.page = val
            this.getImportLog(this.searchForm)
        },
    }
}
</script>

<style lang="less" scoped>
.bomLogDetail {
    padding: 20px;
    height: 100%;
    .title {
        font-size: 16px;
        margin-bottom: 15px;
    }
    /deep/ .el-form-item__label {
        color: #8e98ae;
        font-size: 12px;
    }
    /deep/ .el-form-item__content {
        font-size: 12px;
    }
}
</style>